<template>
  <!-- 条件查询表单 -->
  <el-form :inline="true"
           :model="pageParam"
           class="demo-form-inline"
  >
    <el-form-item label="用户名：">
      <el-input clearable  v-model="pageParam.userName" placeholder="用户名" />
    </el-form-item>
    <el-form-item label="昵称：">
      <el-input clearable  v-model="pageParam.nickName" placeholder="昵称" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="doList">查询</el-button>
    </el-form-item>
  </el-form>

  <!-- 动态数据表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="userId" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><flag /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.userId }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="userName" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>userName: {{ scope.row.userName }}</div>
            <div>email: {{ scope.row.email }}</div>
            <div>phonenumber: {{ scope.row.phonenumber }}</div>
            <div>sex: {{ scope.row.sex==='0'?'女':'男' }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.userName }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="nickName" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.nickName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            v-hasPerms="['system:user:add']"
        >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="pageParam.page"
      v-model:page-size="pageParam.size"
      :page-sizes="[2,4,6,8,10]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<script setup>
import {Flag} from '@element-plus/icons-vue'
import {onMounted, ref} from 'vue'
import {list} from "@/api/user";

// 数据列表
const tableData = ref([]);
// 数据总数
const total=ref(0);

const pageParam=ref({
  page:1,
  size:2,
  userName:"",
  nickName:"",
})

// // 当前页
// const currentPage = ref(1);
// // 每页条数
// const pageSize = ref(2);

const small = ref(true);
const background = ref(true);
const disabled = ref(false);

// 动态获取数据列表
let doList = function (){
  list(pageParam.value).then(res=>{
    // console.log(res);
    tableData.value=res.data.data.records;
    total.value=res.data.data.total;
  })
}

// 改变每页显示条数
const handleSizeChange = (size) => {
  console.log(`size: ${size}`);
  doList();
  // console.log(`${val} items per page`)
}

// 改变当前页
const handleCurrentChange = (page) => {
  console.log(`page: ${page}`);
  doList();
  // console.log(`current page: ${val}`)
}

// 修改数据
const handleEdit = (index, row) => {
  console.log(index, row.userId);
}
// 删除数据
const handleDelete = (index, row) => {
  console.log(index, row.userId);
}

// 当挂载后先获取一下动态数据列表
onMounted(() => {
  doList();
})


</script>
